<template>
  <div class="login-index">
    <div class="content">
      <div class="left-img">
        <img src="../assets/images/login/leftImg999.png" />

        <div class="left">
          <div class="top">Welcome To iBEMLab</div>
          <div class="text">Intelligent Built Environment Monitor Laboratory</div>
          <div class="text">智能室内建筑环境监测与预警系统设计专家</div>
        </div>
      </div>
      <div class="right-box">
        <div class="logo">
          <img src="../assets/images/login/logo.png" />
        </div>
        <div class="login-content">
          <div class="title">账号登录</div>
          <div class="tips"><!--欢迎登录iBEM Lab管理系统！--></div>
          <div>
            <el-form ref="formRef"
                     :model="ruleForm"
                     :rules="rules"
                     class="demo-ruleForm">
              <el-form-item prop="user"
                            style="margin-bottom: 20px">
                <el-input v-model="ruleForm.user"
                          prefix-icon="el-icon-user-solid"
                          maxlength="50"
                          placeholder="用户名"
                          class="myClass-login" />
              </el-form-item>
              <el-form-item prop="passwd"
                            style="margin-bottom: 25px"
                            class="myClass-login">
                <el-input v-model="ruleForm.passwd"
                          prefix-icon="el-icon-s-goods"
                          type="password"
                          maxlength="20"
                          placeholder="密码"
                          @keyup.enter.native="submitForm('formRef')" />
              </el-form-item>
              <el-form-item>
                <!-- <el-checkbox label="同意并接受用户协议与隐私政策"></el-checkbox> -->
                <div class="forget-pwd"
                     @click="forgetPwdFun">忘记密码</div>
              </el-form-item>
              <el-form-item>
                <div @click="submitForm('formRef')"
                     class="login-btn">
                  登录
                </div>
              </el-form-item>
              <div class="or-box">
                <div class="line"></div>
                <div class="text">or</div>
                <div class="line"></div>
              </div>
              <el-form-item>
                <div @click="goRegist"
                     class="register-btn">
                  注册
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  name: "Login",
  components: {},
  data() {
    return {
      ruleForm: {
        user: "",
        email: "",
        passwd: ""
      },
      formRef: null,
      rules: {
        user: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        passwd: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      checked: true,
      btnLoading: false,
      captchaImg: ""
    };
  },
  created() {
    //绑定事件
    window.addEventListener("keydown", this.keyDown, true);
  },
  methods: {
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.submitForm("formRef");
      }
    },
    forgetPwdFun() {
      this.$router.push("/forgetPwd");
    },
    agreementFun(type) {
      this.$router.push({ path: "/agreement", query: { type } });
    },
    goRegist() {
      this.$router.push("/register");
    },
    findAccountFun() {
      this.$router.push("/findAccount");
    },
    findPasswordFun() {
      this.$router.push("/findPassword");
    },
    submitForm(formName) {
      if (!this.checked) {
        Message("未同意用户协议与隐私政策");
        return;
      }
      this.btnLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.btnLoading = false;
          this.$store
            .dispatch("user/loginAct", this.ruleForm)
            .then(response => {
              this.btnLoading = false;
              this.$router.replace("/home");
            })
            .catch(() => {
              this.btnLoading = false;
              // this.sendLoginSms();
            });
        } else {
          this.btnLoading = false;
          //console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.login-index {
  .el-input__icon {
    font-size: 20px !important;
  }
  .el-input__inner {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 18px !important;
    padding-left: 35px;
  }
  .content {
    display: flex;
    .left-img {
      /*img {
        height: 100vh;
      }*/
      .left {
        position: absolute;
        top: 20%;
        left: 2%;
        text-align: left;
        .top {
          font-weight: 800;
          font-size: 40px;
          line-height: 66px;
          color: #ffffff;
        }
        .text {
          font-weight: 400;
          font-size: 20px;
          line-height: 40px;
          color: #ffffff;
        }
      }
    }
    .right-box {
      padding-top: 50px;
      flex: 1;
      .logo {
        display: flex;
        align-items: center;

        img {
          margin: auto;
        }
      }
      .login-content {
        padding-top: 100px;
        width: 430px;
        margin: auto;
        .title {
          font-family: "Microsoft YaHei";
          font-style: normal;
          font-weight: 700;
          font-size: 36px;
          line-height: 48px;
          /* identical to box height */

          color: #000000;
        }
        .tips {
          font-family: "Space Grotesk";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: 26px;
          margin-bottom: 20px;
          /* identical to box height */

          /* 03黑白灰 */

          color: #636e78;
        }
        .forget-pwd {
          float: right;
          cursor: pointer;
          font-family: "Microsoft YaHei";
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          text-decoration-line: underline;
          color: #000000;
          /* Inside auto layout */
          flex: none;
          order: 1;
          flex-grow: 0;
        }
        .login-btn {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 20px 36px;
          width: 430px;
          height: 60px;
          font-size: 18px;
          line-height: 24px;
          /* identical to box height */

          color: #ffffff;

          background: linear-gradient(90deg, #1d99ef 0%, #4cca9c 104.69%),
            #004788;
          border-radius: 6px;
        }
        .register-btn {
          margin-top: 22px;
          box-sizing: border-box;

          /* 自动布局 */

          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 20px 36px;
          width: 430px;
          height: 60px;

          /* 04黑白灰 */

          border: 1px solid #a7afb7;
          border-radius: 6px;
        }
        .or-box {
          font-family: "Space Grotesk";
          font-style: normal;
          font-weight: 400;
          font-size: 20px;
          line-height: 26px;
          /* identical to box height */
          display: flex;
          align-items: center;
          text-align: center;
          color: #7a7a7a;
          .line {
            display: inline-block;
            width: 200px;
            height: 0px;
            border: 1px solid #e0e0e0;
          }
          .text {
            margin: 0 4px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  .right-box {
    scale: 0.9;
  }
}
</style>
